<template>
  <div class="ele-body">
    <!-- 搜索表单 -->
    <account-search @search="reload"  />
    <!-- 数据表格 -->
    <el-card shadow="never">
      <ele-pro-table
        ref="table"  row-key="id" :columns="columns" :datasource="datasource" :cell-style="cellStyle"
        :need-page="true"  @done="onDone"  :height="tableHeight" :full-height="tableFullHeight"
      >
      <!-- :height="tableHeight" :max-height="tableFullHeight" :tools-theme="toolDefault ? 'default' : 'none'" -->
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <div class="ele-space">
            <el-button
            v-permission="'Basic_Account_Add'" 
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit()"
            >
              添加
            </el-button>
            <el-button
            v-permission="'Basic_Account_Export'" 
              size="small"
              icon="el-icon-upload2"
              class="ele-btn-icon"
              @click="reportexcel"
            >
              导出
            </el-button>
          </div>
          <div class="ele-space" style="float: right; margin-top: 5px;">
              <div class="list-tool-item" style="margin-right: 5px;">
                <span>作废数据</span>&nbsp;
                <el-switch
                  :active-value= 1
                  :inactive-value= 0
                  v-model="isDeleted"
                  @change="editState"
                  >
            </el-switch>
              </div>
              <div class="list-tool-divider" style="margin-right: 5px;">
                <el-divider direction="vertical" />
              </div>
          </div>
        </template>
        <template slot="status" slot-scope="{row}">
            <el-switch
              :active-value="0"
              :inactive-value="1"
              active-color="#1890ff"
              inactive-color="red"
              v-model="row.status"
              @change="editState(row)"
              >
            </el-switch>
        </template>
        <!-- 标题列 -->
        <template slot="title" slot-scope="{ row }">
          <i :class="row.icon"></i> {{ row.title }}
        </template>
          <!-- 操作列 -->
        <template slot="action" slot-scope="{ row }"  >
        <el-link type="primary"  :underline="false"  icon="el-icon-edit" v-permission="'Basic_Account_Update'"   @click="openEdit(row)" >修改</el-link>
        <el-popconfirm v-if="row.isSys!=1 && row.deleted!=1" class="ele-action" title="确定要作废吗？"  @confirm="remove(row)" >
          <el-link type="danger" slot="reference" :underline="false" v-permission="'Basic_Account_Delete'"   icon="el-icon-delete" >作废</el-link>
        </el-popconfirm>
        <el-popconfirm confirm-button-text='确认' cancel-button-text='取消' class="ele-action"  @confirm="resetPass(row)" title="确定重置密码吗？">
          <el-link type="warning" v-permission="'Basic_Account_Reset'"   :underline="false" slot="reference" icon="el-icon-lock"  >重置密码</el-link>
        </el-popconfirm>
      </template>
      </ele-pro-table>
    </el-card>
    <!-- 编辑弹窗 -->
    <account-edit :data="current" :visible.sync="showEdit" @done="reload" />
    <!-- 导出数据 -->
    <ExportDialog ref="ExportDialog"></ExportDialog>
  </div>
</template>
<script>
    import AccountEdit from './components/account-edit';
    import AccountSearch from './components/account-search';
    import ExportDialog from '@/components/Excel/ExportDialog'
    import { AllAccount,RemoveAccount,ResetPassword,UpdateStatus } from '@/api/usermanager/accountmanager';
    export default {
      name: 'UserAccount',
      components: {AccountEdit,AccountSearch,ExportDialog},
      data() {
        return {
          isDeleted: 0,
          fixedHeight:true,
          // 当前编辑数据
          current: null,
          // 是否显示编辑弹窗
          showEdit: false,
          // 是否展示删除
          showDelete:false,
          // // 表头工具栏风格
          // toolDefault: true,
          // // 表格固定高度
          // fixedHeight: true,
          // // 全部账户数据
          // accountList: [],
          // 导出列
          exportList: [
            { name: "账户", keys: "account", status: true },
            { name: "真实姓名", keys: "name", status: true },
            { name: "所属角色", keys: "rolesDesc", status: true },
            { name: "创建人", keys: "createUserName", status: true },
            { name: "创建时间", keys: "createDate", status: true },
            // { name: "状态", keys: "statusDesc", status: true }
          ],
          // 表格列配置
          columns: [
            {columnKey: 'index', type: 'index', width: 50, align: 'center', showOverflowTooltip: true, label:'序号',},
            {prop: 'account', label: '账户', showOverflowTooltip: true, sortable: 'account',align: 'center',},
            {prop: 'name', label: '真实姓名', showOverflowTooltip: true, sortable: 'name',align: 'center',},
            {prop: 'rolesDesc', label: '所属角色', showOverflowTooltip: true, align: 'left',sortable: 'rolesDesc',align: 'center',},
            {prop: 'createUserName', label: '创建人', showOverflowTooltip: true, align: 'left',sortable: 'createUserName',align: 'center',},
            {
              prop: 'createDate', label: '创建时间', showOverflowTooltip: true,  align: 'left',sortable: 'createDate',align: 'center',
              formatter: (row, column, cellValue) => {return this.$util.toDateString(cellValue,"YYYY-MM-DD HH:mm:ss");}
            },
            // {prop: 'statusDesc', label: '状态', align: 'center',},
            {columnKey: 'action', label: '操作', width: 250, align: 'center', resizable: false,slot: 'action', hideInSetting: true, showOverflowTooltip: true}
          ],
        };
      },
      computed: {
        // 表格高度
        tableHeight() {
          var fh = this.fixedHeight ? 'calc(100vh - 250px)' : void 0;

          return fh;
        },
        // 表格全屏时高度
        tableFullHeight() {
          var fh =  this.fixedHeight ? 'calc(100vh - 126px)' : null;

          return fh;
        },
      },
      methods: {
        
        /* 表格数据源 */
         async datasource(params) {
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;

          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }

          
          if(!params.where.conditions)params.where.conditions= [];
          params.where.conditions.push({ key:"status",operator: 0,value: 0,})

          let delIndex = params.where.conditions.findIndex((g)=>{
            return g.key == 'deleted';
          })

          if(delIndex>=0){
            params.where.conditions.splice(delIndex,1)
            params.where.conditions.push({ key:"deleted", operator: 0, value: this.isDeleted})
          }else{
            params.where.conditions.push({
              key:"deleted",
              operator: 0,
              value: this.isDeleted,
            });
          }

          //设置删除参数 主要是用户第一次
          params.where = this.setDeleteParams(params.where)
        
          let data = await AllAccount(params.where);

          if(data && data.items){
            data.items.map((m)=>{
              m.grey = this.isDeleted;
            })
          }
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
          return { list:data.items,count:data.totalrecords,};
        },

        editState(){
          this.reload();
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
          // this.accountList = data;
        },
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ where: where });
        },
        
        /**
         * 显示编辑
         * @param row 当前行对像
         */
        openEdit(row) {
          this.current = row;
          this.showEdit = true;
        },

        resetPass(row){
          const loading = this.$loading({ lock: true });
          ResetPassword(row)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            }); 
        },
        /* 删除 */
        remove(row) {
          const loading = this.$loading({ lock: true });
          RemoveAccount(row.id)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        },

        // // 添加删除过滤
        // deleteCondition(v){
        //   this.$refs.table.doRequest((e)=>{
        //     this.reload(e.where);
        //   });
        // },

        //设置删除参数
        setDeleteParams(where){
          if(where!=null){
            if(where.conditions==null) where.conditions=[];
            where.conditions = where.conditions.filter((c)=>{return c.key !='deleted'});
            if(!this.showDelete) where.conditions.push({ key:"deleted", operator: 0, value: 0});
          }
          return where;
        },

        // /* 销毁表格 */
        // destroyTable() {
        //   this.$refs.table.reRenderTable();
        // },
        /* 导出 */
        reportexcel(pams) {
          this.$refs.ExportDialog.showEdits = true
          this.$refs.ExportDialog.checkList = this.exportList
          this.$refs.ExportDialog.titleName = "账户列表"
          this.$refs.ExportDialog.dataList = this.$refs.table.tableData;
        },

        // /* 更改状态 */
        // editState(row) {
        //   const loading = this.$loading({ lock: true });
        //   UpdateStatus(row)
        //   .then((msg)=>{
        //       loading.close();
        //       this.$message.success(msg);
        //       this.reload();
        //   }).catch((e)=>{
        //       loading.close();
        //       this.$message.error(msg);
        //   });
        // },

        /* 样式 */
        cellStyle(param){
          let cellStyle;
          const { row, column, rowIndex, columnIndex } = param;
          switch(row.grey == 1){
            case true:
              cellStyle = 'background-color: RGB(240,242,245)';
              break;
            default:
              cellStyle = '';
              break;
          }
          return cellStyle;
        },
      }
    };
  </script>
  <style lang="scss" scoped>
  .list-tool-item > span {
    vertical-align: middle;
    margin-right: 6px;
  }

  .list-tool-divider {
    padding: 0 12px;
  }

  // ::v-deep .el-table__body-wrapper {
  //   height: 450px !important;
  //   overflow-y:auto !important;
  // }
</style>